<!-- 遥控管理 -->
<template>
  <div class="" :style="styleObj">
    <el-card class="head">
      <div style="display: flex">
        <div style="flex: 1">
          <yg-from
            ref="YkForm"
            :formObj="formObj"
            :formData="formData"
            @selectChange="selectChange"
          >
          </yg-from>
        </div>
        <div class="item_button">
          <div>
            <el-button
              type="success"
              size="mini"
              icon="el-icon-search"
              @click="query"
              >查询</el-button
            >
          </div>
          <div>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-refresh"
              @click="resset"
              >重置</el-button
            >
          </div>
        </div>
      </div>
    </el-card>
    <ux-grid
      class="tableListValue"
      :key="random"
      :data="TableList"
      ref="plxTable"
      stripe
      :border="false"
      :max-height="styleObj.tableHeight"
      size="mini"
      :header-cell-style="{ 'text-align': 'center' }"
      style="width: 100%; font-size: 12px"
      v-loading="loadingShow"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      :cell-style="handleCellStyle"
      :highlight-current-row="true"
      show-overflow
    >
      <ux-table-column
        v-for="(item, index) in columns"
        :key="index"
        :title="item.label"
        :field="item.prop"
        :align="item.align"
        :width="item.width"
        resizeable
      >
      </ux-table-column>
    </ux-grid>
  </div>
</template>

<script>
import { dataURLtoBlob, getBase64 } from "@/utils/exportExcelBlob/index";
import YgTable from "@/components/Table/YgTable.vue";
import YgFrom from "@/components/Form/YgFrom.vue";

import { setMessageCallback, publishMsg, removeMessageCallback } from "@/mqtt";
import { tableMixins } from "./mixin";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "widgetYkData",
  mixins: [tableMixins],
  components: {
    YgTable,
    YgFrom,
  },
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    //这里存放数据
    return {
      loadingShow: false,
      columns: [
        {
          prop: "id",
          label: "遥控id",
          align: "left",
          width: "160",
        },
        {
          prop: "name",
          label: "遥控名称",
        },
        {
          prop: "desc",
          label: "遥控描述",
        },
        {
          prop: "value",
          label: "当前值",
          width: "60",
        },
        {
          prop: "update_time",
          label: "刷新时间",
          width: "160",
        },
      ],
      TableList: [],
      formObj: [
        {
          select: true,
          label: "网关名称", //字段
          prop: "gw_sn", //字段名
          placeholder: "请输入出厂编号", //提示内容
          width: 12, //参考el-col
          disabled: false, //是否禁用
          clearable: false, //是否清空
          labelWidth: "80px",
          options: [],
        },
        {
          select: true,
          label: "终端名称", //字段
          prop: "term_key", //字段名
          placeholder: "请输入终端名称", //提示内容
          width: 12, //参考el-col
          disabled: false, //是否禁用
          clearable: false, //是否清空
          labelWidth: "80px",
          options: [{ label: "全选", value: "all" }],
        },
      ],
      formData: {
        gw_sn: "all",
        term_key: "all",
      },
    };
  },
  //方法集合
  methods: {
    handleCellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.title == "当前值") {
        return { color: "#299cfa", fontWeight: "bold" };
      }
    },
    query() {
      let newMsg = {
        webMsgType: 1012,
        funCode: 0,
      };
      newMsg.data = {
        gw_sn: this.formData.gw_sn,
        term_key: this.formData.term_key,
      };
      publishMsg(newMsg);
    },
    resset() {
      this.$refs.YkForm.resetForm();
    },
    onMessage(topic, msg) {
      //console.log("正在监听--遥控页面数据", topic, msg);
      if (msg.webMsgType === 1007) {
        switch (msg.funCode) {
          case 0:
            if (msg.retCode != 0 || !msg.data) {
              return this.$message.error(msg.retMsg);
            }
            let result = msg.data;
            let newArr = this.formObj.filter((v) => {
              return v.prop === "gw_sn";
            });
            newArr[0].options = [];
            result.map((e) => {
              return newArr[0].options.push({
                label: e.gw_name,
                value: e.gw_sn,
              });
            });
            const allSelect = { label: "全选", value: "all" };
            newArr[0].options.unshift(allSelect);
            break;
          default:
            break;
        }
      }
      if (msg.webMsgType === 1008) {
        switch (msg.funCode) {
          case 0:
            if (msg.retCode != 0 || !msg.data) {
              return this.$message.error(msg.retMsg);
            }
            let result = msg.data;
            this.formData.term_key = "all";
            let newArr = this.formObj.filter((v) => {
              return v.prop === "term_key";
            });
            newArr[0].options = [];
            result.map((e) => {
              return newArr[0].options.push({ label: e.name, value: e.id });
            });
            //console.log(newArr);
            // const allSelect = {label:'全选',value:'all'}
            // newArr[0].options.unshift(allSelect)
            break;

          default:
            break;
        }
      }
      if (msg.webMsgType === 1012) {
        switch (msg.funCode) {
          case 0:
            if (msg.retCode != 0 || !msg.data) {
              return this.$message.error(msg.retMsg);
            }
            this.TableList = msg.data;
            this.loadingShow = false;
            // this.getTableList();
            break;
          case 1:
            if (msg.retCode != 0) {
              return this.$message.error(msg.retMsg);
            }
            break;
          case 2:
            if (msg.retCode != 0 || !msg.data) {
              return this.$message.error(msg.retMsg);
            } else {
              this.uuid = this.YkMsgFrom.ctrl_uuid;
              //console.log(this.uuid);
              if (this.uuid == msg.data.ctrl_uuid && msg.data.ctrl_step === 1) {
                this.$message.success("预置操作已执行!");
                this.buttonDisabled = false;
              } else if (msg.data.ctrl_step === 2) {
                this.$message.success("执行操作已执行!");
                this.buttonDisabled = true;
                this.getTableList();
              } else if (msg.data.ctrl_step === 3) {
                this.$message.success("取消操作已执行!");
                this.buttonDisabled = true;
              }
            }
            break;
          case 3:
            if (msg.retCode != 0 || !msg.data) {
              return this.$message.error(msg.retMsg);
            }
            for (let i = 0; i < this.TableList.length; i++) {
              if (this.TableList[i].id === msg.data.id) {
                this.TableList[i].id = msg.data.id;
                this.TableList[i].value = msg.data.value;
                this.TableList[i].update_time = msg.data.update_time;
              }
            }
            break;
          case 4:
            if (msg.retCode != 0 || !msg.data) {
              return this.$message.error(msg.retMsg);
            } else {
              //console.log(msg.data);
              let base64Data = msg.data.base64_excel;
              dataURLtoBlob(base64Data, "遥控数据列表");
            }
            break;
          case 5:
            if (msg.retCode != 0) {
              return this.$message.error(msg.retMsg);
            }
            this.$message.success(msg.retMsg);
            break;
          default:
            break;
        }
      }
    },
    selectChange(value, index, prop) {
      //console.log(value, index, prop);
      if (prop == "gw_sn") {
        let newArr = this.formObj.filter((v) => {
          return v.prop === "term_key";
        });
        newArr[0].options = [];
        let newMsg = {
          webMsgType: 1008,
          funCode: 0,
        };
        newMsg.data = { gw_sn: value };
        publishMsg(newMsg);
      }
    },
    getTableList() {
      publishMsg({
        webMsgType: 1012,
        funCode: 0,
      });
      this.loadingShow = true;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.options = this.value;
    setMessageCallback(this.onMessage);
    //console.log("遥控管理页面请求消息");
    this.getTableList();
    publishMsg({
      webMsgType: 1007,
      funCode: 0,
    });
  },
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
@import "./css/index.scss";
</style>
